<template>
  <div class="container-layer-photo">
    <van-grid :border="false" :column-num="3" :gutter="10">
      <van-grid-item v-for="(value, index) in computPhotoList" :key="index" @click="checkImage(index)">
        <van-image
          :src="`http://cq-photo.oss-cn-huhehaote.aliyuncs.com/` + value.image_adr"
          fit="cover"
          width="100%"
          height="100"
        />
        <!-- 删除区 -->
        <div class="container-select" @click="delImage(value)">
          <img src="@/assets/close.png" class="select">
        </div>
      </van-grid-item>
    </van-grid>

    <div class="container-save-btn">
      <van-uploader :after-read="upload">
        <div>上传</div>
      </van-uploader>
    </div>
  </div>
</template>

<script>
// api
import { getPhoto, setPhoto } from '@/api/photo'
import { uploadImage } from '@/api/miva_utils'
// vuex
import { mapGetters } from 'vuex'

import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      photoList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    computPhotoList() {
      return this.photoList
    }
  },
  async created() {
    this.$store.dispatch('app/toggleMask', true)
    const res = await getPhoto({ id: this.userInfo.id })
    this.photoList = res.data || []
    for (let i = 0; i < this.photoList.length; i++) {
      this.photoList[i].image_adr
      const firstIndex = this.photoList[i].image_adr.indexOf('.com/')
      const lastIndex = this.photoList[i].image_adr.indexOf('?')
      const image = this.photoList[i].image_adr.slice(firstIndex + 5, lastIndex)
      this.photoList[i].image_adr = image
    }
    this.$store.dispatch('app/toggleMask', false)
  },
  methods: {
    checkImage(index) {
      const images = []
      for (let i = 0; i < this.photoList.length; i++) {
        images.push(`http://cq-photo.oss-cn-huhehaote.aliyuncs.com/` + this.photoList[i].image_adr)
      }
      ImagePreview({ images, startPosition: index })
    },
    async upload(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      const res = await uploadImage(formData)
      // eslint-disable-next-line
      if (res.code == 0) {
        this.upShow = false
        return this.$dialog.alert({
          message: `文件上传失败, ${res.msg}或文件超出大小限制`
        })
      }
      const { data: { image_adr = '' }} = res
      const firstIndex = image_adr.indexOf('.com/')
      const lastIndex = image_adr.indexOf('?')
      const image = image_adr.slice(firstIndex + 5, lastIndex)
      this.photoList.push({ image_adr: image })
      await setPhoto({ album: this.photoList })
    },
    async delImage(value) {
      const index = this.photoList.indexOf(value)
      this.photoList.splice(index, 1)
      await setPhoto({ album: this.photoList })
    }
  }
}
</script>

<style lang="less" scoped>
.container-save-btn {
  width: 100%;
  padding: 10px;
  position: fixed;
  bottom: 0;
  text-align: center;
  background-color: #f45050;
  color: #fff;
}
.container-select {
    position: absolute;
    right: 5px;
    top: 5px;
}
</style>
